<template>
  <div>
    <!-- 头部模块 -->
    <div class="contain">
      <div class="model">
        <div
          class="banner"
          style="background-image:url('static/images/top_bg.png')"
        ></div>
        <div class="nav">
          <ul class="nav-ul clearFix">
            <li
              v-for="(item, index) in navList"
              :key="index"
              :class="$route.path == item.path ? 'active' : ''"
            >
              <router-link :to="item.path">{{ item.title }}</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          path: "/netNavigation",
          title: "首页"
        },
        {
          path: "/index",
          title: "网址导航"
        },
        {
          path: "/group",
          title: "组织机构"
        },
        {
          path: "/education",
          title: "教育工作"
        },
        {
          path: "/serviceInfo",
          title: "服务指南"
        },
        {
          path: "/policy",
          title: "政策服务"
        },
        {
          path: "/contactUs",
          title: "联系我们"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.contain {
  .model {
    .banner {
      width: 100%;
      height: 416px;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .nav {
      display: flex;
      justify-content: center;
      background-color: #fff;
      .nav-ul {
        display: inline-block;

        li {
          float: left;
          font-size: 20px;
          color: $nomal-color;
          margin: 0 5px;
          text-align: center;
          position: relative;
          // display: inline-block;
          a {
            display: block;
            padding: 34px 0;
            color: inherit;
            width: 156px;
            font-size: inherit;
          }
          &::after {
            content: " ";
            width: 0%;
            position: absolute;
            left: 50%;
            bottom: 0;
            height: 4px;
            transform: translateX(-50%);
            transition: 0.3s;
            background-color: $font-color;
          }
          &:hover::after {
            width: 100%;
          }
          &::before {
            content: " ";
            width: 1px;
            height: 21px;
            background-color: #e6e6e6;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          &:last-child::before {
            display: none;
          }
        }
        li.active {
          color: $font-color;
          font-weight: 600;
          &::after {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
